import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { observer, inject } from 'mobx-react'
import styles from './Comment.less'
import { Table, Tag } from 'antd' 


@inject('comment')
@withRouter
@observer
class CommentView extends Component {

	constructor(props) {
		super(props)
		this.comment = this.props.comment
	} 

	columns = [
		{
			title: '父子评论',
			key: 'tag',
			render: (text, record, index) => {
				return <span>{ record.parentId ? <Tag color="#f50">子</Tag> : <Tag color="#87d068">父</Tag> }</span>
			}
		},
		{
		    title: 'ID',
		    dataIndex: '_id',
		    key: '_id'
		}, 
		{
		    title: '昵称',
		    dataIndex: 'nickName',
		    key: 'nickName'
		}, 
		{
		    title: 'email',
		    dataIndex: 'email',
		    key: 'email'
		}, 
		{
		    title: '评论文章',
		    dataIndex: 'articleTitle',
		    key: 'articleTitle'
		},
		{
			title: '评论内容',
			dataIndex: 'content',
			key: 'content'
		},
		{
			title: '评论时间',
			dataIndex: 'time',
			key: 'time'
		},
		{
			title: '父级ID',
			dataIndex: 'parentId',
			key: 'parentId'
		},
		{
			title: '操作',
			render: (text, record, index) => {
				return (
					<div>
						<a href="https://mail.qq.com/cgi-bin/loginpage" target="_blank">回复</a>
						<a style={{marginLeft: "10px"}} onClick={() => {this.comment.doDeleteComment(record._id || record.parentId, record.time, record.parentId ? true : false)}}>删除</a>
					</div>
				)
			}
		}
	]

	userList = []


	componentWillMount() {
		this.comment.doGetCommentList()
	}

	render() {
		return (
			<div className={styles.box} style={{backgroundColor: "#fff", padding: "30px"}}>
				<div className={styles.shadow}></div>

				<Table rowClassName={(record, index) => record.parentId ? styles.row : ''} rowKey='time' bordered={true} columns={this.columns} dataSource={this.comment.commentList}></Table>
			</div>
		)
	}
}

export default CommentView